<template>
  <div class="index">
    <div class="nav-header">
      <div class="container">
        <div class="header-logo">
          <a href="/#/index"></a>
        </div>
        <div class="header-menu">
          <!--          <div class="item-menu">-->
          <!--            <span>小米手机</span>-->
          <!--            <div class="children">-->
          <!--              <ul>-->
          <!--                <li class="product">-->
          <!--                  <a href="/#/product/31" target="_blank">-->
          <!--                    <div class="pro-img">-->
          <!--                      <img src="/imgs/nav-img/nav-1.png" alt="" />-->
          <!--                    </div>-->
          <!--                    <div class="pro-name">小米CC9</div>-->
          <!--                    <div class="pro-price">1799元</div>-->
          <!--                  </a>-->
          <!--                </li>-->
          <!--                <li class="product">-->
          <!--                  <a href="/#/product/31" target="_blank">-->
          <!--                    <div class="pro-img">-->
          <!--                      <img src="/imgs/nav-img/nav-1.png" alt="" />-->
          <!--                    </div>-->
          <!--                    <div class="pro-name">小米CC9</div>-->
          <!--                    <div class="pro-price">1799元</div>-->
          <!--                  </a>-->
          <!--                </li>-->
          <!--                <li class="product">-->
          <!--                  <a href="/#/product/31" target="_blank">-->
          <!--                    <div class="pro-img">-->
          <!--                      <img src="/imgs/nav-img/nav-1.png" alt="" />-->
          <!--                    </div>-->
          <!--                    <div class="pro-name">小米CC9</div>-->
          <!--                    <div class="pro-price">1799元</div>-->
          <!--                  </a>-->
          <!--                </li>-->
          <!--                <li class="product">-->
          <!--                  <a href="/#/product/31" target="_blank">-->
          <!--                    <div class="pro-img">-->
          <!--                      <img src="/imgs/nav-img/nav-1.png" alt="" />-->
          <!--                    </div>-->
          <!--                    <div class="pro-name">小米CC9</div>-->
          <!--                    <div class="pro-price">1799元</div>-->
          <!--                  </a>-->
          <!--                </li>-->
          <!--                <li class="product">-->
          <!--                  <a href="/#/product/31" target="_blank">-->
          <!--                    <div class="pro-img">-->
          <!--                      <img src="/imgs/nav-img/nav-1.png" alt="" />-->
          <!--                    </div>-->
          <!--                    <div class="pro-name">小米CC9</div>-->
          <!--                    <div class="pro-price">1799元</div>-->
          <!--                  </a>-->
          <!--                </li>-->
          <!--                <li class="product">-->
          <!--                  <a href="/#/product/31" target="_blank">-->
          <!--                    <div class="pro-img">-->
          <!--                      <img src="/imgs/nav-img/nav-1.png" alt="" />-->
          <!--                    </div>-->
          <!--                    <div class="pro-name">小米CC9</div>-->
          <!--                    <div class="pro-price">1799元</div>-->
          <!--                  </a>-->
          <!--                </li>-->
          <!--              </ul>-->
          <!--            </div>-->
          <!--          </div>-->
          <!--          <div class="item-menu">-->
          <!--            <span>RedMi红米</span>-->
          <!--          </div>-->
          <!--          <div class="item-menu">-->
          <!--            <span>电视</span>-->
          <!--            <div class="children">-->
          <!--              <ul>-->
          <!--                <li class="product">-->
          <!--                  <a href="" target="_blank">-->
          <!--                    <div class="pro-img">-->
          <!--                      <img v-lazy="'/imgs/nav-img/nav-3-1.jpg'" alt="" />-->
          <!--                    </div>-->
          <!--                    <div class="pro-name">小米壁画电视 65英寸</div>-->
          <!--                    <div class="pro-price">6999元</div>-->
          <!--                  </a>-->
          <!--                </li>-->
          <!--                <li class="product">-->
          <!--                  <a href="" target="_blank">-->
          <!--                    <div class="pro-img">-->
          <!--                      <img v-lazy="'/imgs/nav-img/nav-3-2.jpg'" alt="" />-->
          <!--                    </div>-->
          <!--                    <div class="pro-name">小米全面屏电视E55A</div>-->
          <!--                    <div class="pro-price">1999元</div>-->
          <!--                  </a>-->
          <!--                </li>-->
          <!--                <li class="product">-->
          <!--                  <a href="" target="_blank">-->
          <!--                    <div class="pro-img">-->
          <!--                      <img v-lazy="'/imgs/nav-img/nav-3-3.png'" alt="" />-->
          <!--                    </div>-->
          <!--                    <div class="pro-name">小米电视4A 32英寸</div>-->
          <!--                    <div class="pro-price">699元</div>-->
          <!--                  </a>-->
          <!--                </li>-->
          <!--                <li class="product">-->
          <!--                  <a href="" target="_blank">-->
          <!--                    <div class="pro-img">-->
          <!--                      <img v-lazy="'/imgs/nav-img/nav-3-4.jpg'" alt="" />-->
          <!--                    </div>-->
          <!--                    <div class="pro-name">小米电视4A 55英寸</div>-->
          <!--                    <div class="pro-price">1799元</div>-->
          <!--                  </a>-->
          <!--                </li>-->
          <!--                <li class="product">-->
          <!--                  <a href="" target="_blank">-->
          <!--                    <div class="pro-img">-->
          <!--                      <img v-lazy="'/imgs/nav-img/nav-3-5.jpg'" alt="" />-->
          <!--                    </div>-->
          <!--                    <div class="pro-name">小米电视4A 65英寸</div>-->
          <!--                    <div class="pro-price">2699元</div>-->
          <!--                  </a>-->
          <!--                </li>-->
          <!--                <li class="product">-->
          <!--                  <a href="" target="_blank">-->
          <!--                    <div class="pro-img">-->
          <!--                      <img v-lazy="'/imgs/nav-img/nav-3-6.png'" alt="" />-->
          <!--                    </div>-->
          <!--                    <div class="pro-name">查看全部</div>-->
          <!--                    <div class="pro-price">查看全部</div>-->
          <!--                  </a>-->
          <!--                </li>-->
          <!--              </ul>-->
          <!--            </div>-->
          <!--          </div>-->
        </div>
        <div class="header-search">
          <div class="wrapper">
            <input type="text" v-model="params.keyword" name="keyword"/>
            <a href="javascript:;" @click="search"></a>
          </div>
        </div>
      </div>
    </div>
    <div class="container">
      <div class="swiper-box">
        <div class="nav-menu">
          <ul class="menu-wrap">
            <li class="menu-item" v-for="item in categoryList" :key="item.id">
              <a
                  href="javascript:;"
                  class="side-tit"
                  @click="gotoDetail(item.id)"
              >{{ item.name }}</a
              >
              <div class="children">
                <ul>
                  <!--todo:一排显示4个-->
                  <li
                      v-for="childItem in item.childCategory"
                      :key="childItem.id"
                  >
                    <!-- 二级菜单没有数据 -->
                    <!-- @click="gotoDetail(childItem.id)" -->
                    <a href="javascript:;">{{ childItem.name }}</a>
                  </li>
                </ul>
              </div>
            </li>
          </ul>
        </div>
        <swiper
            ref="swiperOption"
            v-bind:options="swiperOption"
            v-if="bannerArr.length >= 0"
        >
          <!-- slides -->
          <swiper-slide>
            <img src="../assets/images/banner1.jpg" alt=""/>
          </swiper-slide>
          <swiper-slide>
            <img src="../assets/images/banner2.jpg" alt=""/>
          </swiper-slide>
          <swiper-slide>
            <img src="../assets/images/banner3.jpg" alt=""/>
          </swiper-slide>
          <swiper-slide>
            <img src="../assets/images/banner4.jpg" alt=""/>
          </swiper-slide>

          <!-- Optional controls -->
          <div class="swiper-pagination" slot="pagination"></div>
          <div class="swiper-button-prev" slot="button-prev"></div>
          <div class="swiper-button-next" slot="button-next"></div>
        </swiper>
      </div>
      <div class="banner">
        <a href="">
          <img src="../assets/images/banner-bottom.webp" alt=""/>
        </a>
      </div>
    </div>
    <div class="product-box">
      <div class="container">
        <h2>商品</h2>
        <div class="wrapper">
          <div class="list-box">
            <div class="list">
              <div class="item" v-for="item in goodsListTop" :key="item.id">
                <span class="new-pro">新品</span>
                <div class="item-img">
                  <img :src="item.image" alt=""/>
                </div>
                <div class="item-info">
                  <h3>{{ item.name }}</h3>
                  <p>{{ item.detail }}</p>
                  <p class="price" @click="handleAddCar(item)">
                    {{ item.price }}元
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <service-bar></service-bar>
  </div>
</template>
<script>
import ServiceBar from "./../components/ServiceBar";
import {swiper, swiperSlide} from "vue-awesome-swiper";
import {getProductLists, postCartAdd} from "@/api/goods";
import {getCategoryList} from "@/api/category";
import "swiper/dist/css/swiper.css";

export default {
  name: "index",
  components: {
    swiper,
    swiperSlide,
    ServiceBar,
  },
  data() {
    return {
      swiperOption: {
        autoplay: {
          disableOnInteraction: false, // 用户操作swiper之后，是否禁止autoplay
          delay: 3000, // 自动切换的时间间隔（单位ms）
        },
        loop: true,
        effect: "cube",
        cubeEffect: {
          shadowOffset: 100,
          shadowScale: 0.6,
        },
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
        },
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
      },
      bannerArr: [],
      goodsListTop: [],
      goodsListBottom: [],
      categoryList: [],
      params: {
        orderBy: "createTime",
        categoryId: "",
        keyword: "",
        pageNum: 1,
        pageSize: 100,
      },
    };
  },
  created() {
    this.handleGetProductList({...this.params});
    this.handleGetCategoryList({...this.params});
  },
  mounted() {
  },

  methods: {
    gotoDetail(id) {
      this.params.categoryId = id;
      console.log(this.params.categoryId);
      this.handleGetProductList({...this.params});
    },
    async handleGetProductList(params) {
      this.bannerArr = [];
      const res = await getProductLists(params);
      if (res.code === 10000) {
        this.goodsListTop = res.data.list;
        // .slice(0, 4);
        this.goodsListTop.map((items) => {
          this.bannerArr.push(items.image);
        });
        this.goodsListBottom = res.data.list;
        // .slice(4, 8);
      }
    },
    async handleGetCategoryList(params) {
      const {pageNum} = params;
      const res = await getCategoryList({pageNum, pageSize: 99});
      if (res.code === 10000) {
        this.categoryList = res.data;

        console.log(this.categoryList);
      }
    },
    async handleAddCar(item) {
      console.log(item);
      const res = await postCartAdd({productId: item.id, count: 1});
      if (res.code === 10000) {
        console.log(res);
        this.$message.success("添加成功");
      }
    },
    async search() {
      console.log(this.params);
      this.handleGetProductList({...this.params});
    },
  },
};
</script>
<style lang="scss">
@import "./../assets/scss/config.scss";
@import "./../assets/scss/mixin.scss";

.swiper-container-cube .swiper-cube-shadow {
  position: absolute;
  left: 0;
  bottom: 0px;
  width: 100%;
  height: 100%;
  background: none !important;
  opacity: 0.6;
  -webkit-filter: blur(50px);
  filter: none !important;
  z-index: 0;
}

.index {
  .swiper-box {
    .nav-menu {
      position: absolute;
      width: 264px;
      height: 460px;
      z-index: 9;
      padding: 26px 0;
      background-color: #55585a7a;
      box-sizing: border-box;

      .menu-wrap {
        .menu-item {
          height: 42px;
          line-height: 42px;

          .side-tit {
            position: relative;
            display: block;
            font-size: 16px;
            color: #ffffff;
            padding-left: 30px;
          }

          a {
            position: relative;
            display: block;
            font-size: 16px;
            color: #ffffff;

            &:after {
              position: absolute;
              right: 30px;
              top: 17.5px;
              content: " ";
              @include bgImg(10px, 15px, "/imgs/icon-arrow.png");
            }
          }

          &:hover {
            background-color: $colorA;

            .children {
              display: block;
            }
          }

          .children {
            display: none;
            width: 962px;
            height: 460px;
            background-color: $colorG;
            position: absolute;
            top: 0;
            left: 264px;
            border: 1px solid $colorH;

            ul {
              display: flex;
              justify-content: space-between;
              height: 75px;

              li {
                height: 75px;
                line-height: 75px;
                flex: 1;
                padding-left: 23px;
              }

              a {
                color: $colorB;
                font-size: 14px;
              }

              img {
                width: 42px;
                height: 35px;
                vertical-align: middle;
                margin-right: 15px;
              }
            }
          }
        }
      }
    }

    .swiper-container {
      height: 460px;

      .swiper-button-prev {
        left: 274px;
      }

      img {
        width: 100%;
        height: 100%;
      }
    }
  }

  .ads-box {
    @include flex();
    margin-top: 14px;
    margin-bottom: 31px;

    a {
      width: 296px;
      height: 167px;
    }
  }

  .banner {
    margin-bottom: 50px;
  }

  .product-box {
    background-color: $colorJ;
    padding: 30px 0 50px;

    h2 {
      font-size: $fontF;
      height: 21px;
      line-height: 21px;
      color: $colorB;
      margin-bottom: 20px;
    }

    .wrapper {
      display: flex;

      .banner-left {
        margin-right: 16px;

        img {
          width: 224px;
          height: 619px;
        }
      }

      .list-box {
        .list {
          @include flex();
          width: 986px;
          margin-bottom: 14px;
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          flex-wrap: wrap;
          width: 1230px;

          &:last-child {
            margin-bottom: 0;
          }

          .item {
            margin: 10px;
            width: 18%;
            height: 302px;
            background-color: $colorG;
            text-align: center;

            span {
              display: inline-block;
              width: 67px;
              height: 24px;
              font-size: 14px;
              line-height: 24px;
              color: $colorG;

              &.new-pro {
                background-color: #7ecf68;
              }

              &.kill-pro {
                background-color: #e82626;
              }
            }

            .item-img {
              img {
                width: 100%;
                height: 195px;
              }
            }

            .item-info {
              h3 {
                font-size: $fontJ;
                color: $colorB;
                line-height: $fontJ;
                font-weight: bold;
                text-overflow: ellipsis;
                overflow: hidden;
                white-space: nowrap;
              }

              p {
                color: $colorD;
                line-height: 13px;
                margin: 6px auto 13px;
                text-overflow: -o-ellipsis-lastline;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
              }

              .price {
                color: #f20a0a;
                font-size: $fontJ;
                font-weight: bold;
                cursor: pointer;

                &:after {
                  @include bgImg(22px, 22px, "/imgs/icon-cart-hover.png");
                  content: " ";
                  margin-left: 5px;
                  vertical-align: middle;
                }
              }
            }
          }
        }

        .list:after {
          content: "";
          width: 20%;
        }
      }
    }
  }
}

.nav-header {
  .container {
    position: relative;
    height: 112px;
    @include flex();

    .header-menu {
      display: inline-block;
      width: 643px;
      padding-left: 209px;

      .item-menu {
        display: inline-block;
        color: #333333;
        font-weight: bold;
        font-size: 16px;
        line-height: 112px;
        margin-right: 20px;

        span {
          cursor: pointer;
        }

        &:hover {
          color: $colorA;

          .children {
            height: 220px;
            opacity: 1;
          }
        }

        .children {
          position: absolute;
          top: 112px;
          left: 0;
          width: 1226px;
          height: 0;
          opacity: 0;
          overflow: hidden;
          border-top: 1px solid #e5e5e5;
          box-shadow: 0px 7px 6px 0px rgba(0, 0, 0, 0.11);
          z-index: 10;
          transition: all 0.5s;
          background-color: #ffffff;

          .product {
            position: relative;
            float: left;
            width: 16.6%;
            height: 220px;
            font-size: 12px;
            line-height: 12px;
            text-align: center;

            a {
              display: inline-block;
            }

            img {
              width: auto;
              height: 111px;
              margin-top: 26px;
            }

            .pro-img {
              height: 137px;
            }

            .pro-name {
              font-weight: bold;
              margin-top: 19px;
              margin-bottom: 8px;
              color: $colorB;
            }

            .pro-price {
              color: $colorA;
            }

            &:before {
              content: " ";
              position: absolute;
              top: 28px;
              right: 0;
              border-left: 1px solid $colorF;
              height: 100px;
              width: 1px;
            }

            &:last-child:before {
              display: none;
            }
          }
        }
      }
    }

    .header-search {
      width: 319px;

      .wrapper {
        height: 50px;
        border: 1px solid #e0e0e0;
        display: flex;
        align-items: center;

        input {
          border: none;
          box-sizing: border-box;
          border-right: 1px solid #e0e0e0;
          width: 264px;
          height: 50px;
          padding-left: 14px;
        }

        a {
          @include bgImg(18px, 18px, "/imgs/icon-search.png");
          margin-left: 17px;
        }
      }
    }
  }
}
</style>
